<template>
  <div class="user">
    <van-cell-group>
      <van-cell class="user-info">
        <van-image :src="info.portrait" width="50" height="50" round></van-image>
        <div class="user-info-content">
          <h3>{{ info.userName }}</h3>
          <span>
            <van-icon name='edit'></van-icon>
            编辑个人资料
            </span>
        </div>
      </van-cell>
      <van-cell class="access-info">
        <van-grid :border="false">
          <van-grid-item>
            <span>1</span>
            <span>学习时长</span>
          </van-grid-item>
          <van-grid-item>
            <span>2</span>
            <span>钱包/勾豆</span>
          </van-grid-item>
          <van-grid-item>
            <span>3</span>
            <span>优惠卷</span>
          </van-grid-item>
          <van-grid-item>
            <span>4</span>
            <span>学分</span>
          </van-grid-item>
        </van-grid>
      </van-cell>
      <van-cell :border="false">
        <van-cell icon="user-o" is-link title="分销中心" value="收益200元" />
        <van-cell icon="setting-o" is-link title="个人设置" />
        <van-cell icon="down" is-link title="下载中心" />
        <van-cell icon="question-o" is-link title="帮助与反馈" />
        <van-cell icon="info-o" is-link title="关于程序" value="v2.2.0" />
      </van-cell>
    </van-cell-group>
    <layout-footer></layout-footer>
  </div>
</template>

<script>
import layoutFooter from '@/components/layoutfooter'
import { getInfo } from '@/services/user'

export default {
  name: 'User',
  data () {
    return {
      info: {}
    }
  },
  created () {
    this.Info()
  },
  components: {
    layoutFooter
  },
  methods: {
    async Info () {
      const { data } = await getInfo()
      if (data.state === 1) {
        this.info = data.content
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.user-info {
  box-sizing: border-box;
  padding: 30px 20px;
  background-color: coral;
}
.user-info-content {
  padding-left: 15px;
}
.user-info-content h3 {
  margin: 5px;
  font-size: 18px;
}
.user-info .van-cell__value {
  display: flex;
  align-items: center;
}

.access-info {
  display: flex;
  background-color: coral;
  margin-top: -1px;
}
.van-grid-item span:nth-child(1) {
  font-size: 20px;
  font-weight: 700;
}
</style>
